<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <Icon :icon="getTitle.icon" class="m-1 pr-1" />
        <span> {{ getTitle.value }} </span>
      </template>
      <template #toolbar>
        <!-- <a-button v-auth="'proj:attachment:pmAttachment:update'" @click="handleReload">
          <Icon icon="ant-design:reload-outlined" /> {{ t('更新附件信息') }}
        </a-button> -->

        <a-popconfirm
          title="是否确认更新附件信息？"
          ok-text="是"
          cancel-text="否"
          placement="bottom"
          @confirm="handleReload()"
        >
          <a-button v-auth="'proj:attachment:pmAttachment:update'">
            <Icon icon="ant-design:reload-outlined" /> {{ t('更新附件信息') }}
          </a-button>
        </a-popconfirm>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsProjAttachmentPmAttachmentList',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, watch } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Icon } from '/@/components/Icon';
  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
  import { pmAttachmentListData, pmAttachmentCheck, pmAttachmentRefreshFromBz } from '/@/api/proj/attachment/pmAttachment';
  import { FormProps } from '/@/components/Form';
  import { downloadByUrl } from '/@/utils/file/download';
  import { useMessage } from '/@/hooks/web/useMessage';
  type Recordable = {
    downloadStatus: string | null | undefined;
  };

  const { t } = useI18n('proj.attachment.pmAttachment');
  const { showMessage } = useMessage();
  const getTitle = {
    icon: 'ant-design:book-outlined',
    value: t('报装附件管理'),
  };

  const props = defineProps({
    projectno: { type: String, default: '' },
    fileuploadurlnode:{ type: Number, default: '' },
  });

  watch(
    () => [props.projectno,props.fileuploadurlnode],
    () => {
      reload();
    },
  );

  const searchForm: FormProps = {
    baseColProps: { lg: 6, md: 8 },
    labelWidth: 90,
    schemas: [
      {
        label: t('设计变更编号'),
        field: 'designerchangeno',
        component: 'Input',
      },
      {
        label: t('文件类型'),
        field: 'fileuploadurlname',
        component: 'Input',
      },
      {
        label: t('文件名称'),
        field: 'attachmentname',
        component: 'Input',
      },
      {
        label: t('录入时间'),
        field: 'createDate',
        component: 'DatePicker',
        componentProps: {
          format: 'YYYY-MM-DD HH:mm:ss',
          showTime: { format: 'HH:mm:ss' },
        },
      },
      {
        label: t('录入人'),
        field: 'uploadorname',
        component: 'Input',
      },
    ],
  };

  const tableColumns: BasicColumn[] = [
    /* {
      title: t('项目编码'),
      dataIndex: 'projectno',
      key: 'a.projectno',
      sorter: true,
      width: 230,
      align: 'left',
      slot: 'firstColumn',
    }, */
    {
      title: t('设计变更编号'),
      dataIndex: 'designerchangeno',
      key: 'a.designerchangeno',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('文件类型'),
      dataIndex: 'fileuploadurlname',
      key: 'a.fileuploadurlname',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('文件格式'),
      dataIndex: 'filetype',
      key: 'a.filetype',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('文件名称'),
      dataIndex: 'attachmentname',
      key: 'a.attachmentname',
      sorter: true,
      width: 130,
      align: 'left',
    },
    {
      title: t('录入时间'),
      dataIndex: 'createDate',
      key: 'a.createtime',
      sorter: true,
      width: 130,
      align: 'center',
    },
    {
      title: t('录入人'),
      dataIndex: 'uploadorname',
      key: 'a.uploadorname',
      sorter: true,
      width: 130,
      align: 'left',
    },
  ];

  const actionColumn: BasicColumn = {
    width: 60,
    actions: (record: Recordable) => [
      {
        // icon: 'ant-design:download-outlined', 
        // 根据状态显示不同的按钮 0 可拉取状态 下载图标 1 已下载 下载图标黄色 2 下载失败 下载图标黄色
        icon : (record.downloadStatus || '0') == '0' ? 'ant-design:pull-request-outlined': (record.downloadStatus || '0') == '1' ? 'ant-design:download-outlined':'ant-design:close-outlined',
        // title: t('下载报装附件'),
        // 文字
        // 只有为0的时候添加onClick事件
        color: (record.downloadStatus || '0') == '0' ? 'warning':(record.downloadStatus || '0') == '1' ? 'success':'error',
        title: (record.downloadStatus || '0') == '0' ? t('拉取报装附件') : (record.downloadStatus || '0') == '1' ? t('下载') : t('下载失败'), 
        // label: record.downloadStatus == '0' ? '拉取报装附件' : record.downloadStatus == '1' ? '下载' : '下载失败',
        onClick: handleDownload.bind(this, record),
        auth: 'proj:attachment:pmAttachment:down',
      },
    ],
  };

  const [registerTable, { reload }] = useTable({
    api: pmAttachmentListData,
    beforeFetch: (params) => {
      params.projectno = props.projectno;
      params.fileuploadurlnode = props.fileuploadurlnode;
      return params;
    },
    columns: tableColumns,
    actionColumn: actionColumn,
    formConfig: searchForm,
    showTableSetting: true,
    useSearchForm: false,
    canResize: true,
  });
   // 获取当前的域名地址
  async function handleDownload(record: Recordable) {
    const res = await pmAttachmentCheck({ id: record.id, type: '1' });
    if (res.result == '200' || res.result == '203') {
      const originUrl = window.location.origin;
      downloadByUrl({
        url: originUrl + res.data,
        target: '_self',
        fileName: record.attachmentname,
      });
    } else {
      showMessage(res.message);
    }
  }

  // function handleDownload(record: Recordable) {

  //   downloadByUrl({
  //     url: url,
  //     target: '_self',
  //     fileName: name,
  //   });
  // }

  async function handleReload() {
      const res = await pmAttachmentRefreshFromBz({ projectno: props.projectno });
      showMessage(res.message);
      reload();
  }
</script>
